<template>
  <a-modal
    :title="title"
    v-model="visible"
    width="900px"
    :dialog-style="{ top: '70px' }"
    wrapClassName="modal-add"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning" tip="加载中...">
      <div class="content">
        <div class="top">
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>模型名称：</span>
            <div class="item-value">
              <a-input placeholder="请输入模型名称" allow-clear v-model="basicInfo.topicName" />
            </div>
          </div>
          <div class="item">
            <span class="item-left">模型描述：</span>
            <div class="item-value">
              <a-textarea
                placeholder="请输入模型描述"
                :auto-size="{ minRows: 3, maxRows: 3 }"
                allow-clear
                v-model="basicInfo.topicDesc"
              />
            </div>
          </div>
          <div class="item">
            <span class="item-left">所属专题：</span>
            <div class="item-value">
              <a-tree-select
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                multiple
                placeholder="请选择所属专题"
                style="width: 100%;"
                :replaceFields="TopicReplaceFields"
                :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                :treeData="topicTypes"
                v-model="basicInfo.topicType">
              </a-tree-select>
            </div>
          </div>
          <!-- <div class="item">
            <span class="item-left"><label class="requrid">*</label>是否启用：</span>
            <div class="item-value">
              <a-radio-group class="radio-line" v-model="basicInfo.status" @change="handleStatus">
                <a-radio style="width: 120px" value="1">启用</a-radio>
                <a-radio value="2">停用</a-radio>
              </a-radio-group>
            </div>
          </div> -->
        </div>
        <div class="center">
          <div class="item" style="margin-bottom: 5px">
            <span class="item-left"><label class="requrid">*</label>接口服务编码：</span>
            <div class="item-value">
              <a-input
                placeholder="请输入接口服务编码"
                allow-clear
                v-model="basicInfo.serviceCode"
                :disabled="title === '详情'"
              />
            </div>
          </div>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>接口服务是否启用：</span>
            <div class="item-value">
              <a-radio-group class="radio-line" v-model="basicInfo.serviceStatus" :disabled="title === '详情'">
                <a-radio style="width: 120px" value="1">启用</a-radio>
                <a-radio value="2">停用</a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>数据表名称:</span>
            <div class="item-value">
              <a-input placeholder="请输入数据表名称" allow-clear v-model="basicInfo.topicTable" disabled />
            </div>
          </div>
          <div class="box">
            <a-table
              ref="table"
              size="middle"
              bordered
              :scroll="{ y: 270 }"
              rowKey="id"
              :columns="columns"
              :pagination="false"
              :dataSource="basicInfo.topicCols"
            >
              <span slot="dataType" slot-scope="text, record">
                {{ handleDataType(record.dataType) }}
              </span>
            </a-table>
          </div>
        </div>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import { ajaxGetDictItems } from '@/api/api'
import { getAction, postAction, putAction } from '@/api/manage'

export default {
  name: 'TopicEditModal',
  props: {
    modalVisible: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '编辑'
    }
  },
  data() {
    return {
      TopicReplaceFields: {
        children: 'childList',
        title: 'catalogName',
        key: 'id',
        value: 'id'
      },
      topicTypes: [],
      basicInfo: {},
      spinning: false,
      loading: false,
      visible: this.modalVisible,
      columns: [
        {
          title: '指标/维度',
          align: 'center',
          dataIndex: 'name',
          width: 80
        },
        {
          title: '显示别名(备注)',
          align: 'center',
          dataIndex: 'columnComment',
          width: 160
        },
        {
          title: '字段名称',
          align: 'center',
          dataIndex: 'columnName',
          width: 130
        },
        {
          title: '数据类型',
          align: 'center',
          dataIndex: 'dataType',
          width: 100,
          scopedSlots: { customRender: 'dataType' }
        },
        {
          title: '长度',
          align: 'center',
          dataIndex: 'columnLength',
          width: 45
        },
        {
          title: '小数点位数',
          align: 'center',
          dataIndex: 'scale',
          width: 80
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: 70
        }
      ],
      url: {
        update: '/topic/config/editTopicServ',
        updateBaseInfo: '/index/scSituationIndexTopic/edit',
        queryById: '/topic/config/loadTopic'
      },
      serviceStatusFlag: false,
      dataTypeArray: []
    }
  },
  created() {
    this.handleGetDataAll()
    this.getTopicTypes()
  },
  methods: {
    getTopicTypes() {
      this.topicTypes = []
      getAction('/index/config/queryIndexCatalog', {}).then((res) => {
        if (res.success) {
          this.topicTypes = res.result
        }
      })
    },
    /**
     * @description 获取所有的数据
     * @returns void
     */
    async handleGetDataAll() {
      await this.handleDataTypeArray('column_data_type')
      this.handleGetDetail()
    },

    /**
     * @description 获取详情信息
     * @returns void
     */
    handleGetDetail() {
      this.spinning = true
      getAction(this.url.queryById, { topicId: this.currentId }).then((res) => {
        if (res.code === 200) {
          res.result.topicCols.map((item, index) => {
            item.name = item.isIndex === '1' ? '指标' : '维度'
          })
          this.basicInfo = res.result
          this.basicInfo.topicType = res.result.topicType != null ? res.result.topicType.split(',') : []
        } else {
          this.$message.warning(res.message)
          this.basicInfo = {}
        }
        this.spinning = false
      }).catch(() => {
        this.spinning = false
        this.basicInfo = {}
      })
    },

    /**
     * @description 获取数据字典
     * @returns void
     */
    handleDataTypeArray(dictCode) {
      // 根据字典Code, 初始化字典数组
      ajaxGetDictItems(dictCode, null).then((res) => {
        if (res.success) {
          this.dataTypeArray = res.result
        }
      })
    },

    /**
    * @description 处理字典显示
    * @returns void
    */
    handleDataType(dataType) {
      const item = this.dataTypeArray.filter(t => t['value'] === dataType)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    },

    /**
     * @description 改变指标状态
     * @returns void
     */
    handleStatus() {
      if (this.basicInfo.status === '1') {
        this.serviceStatusFlag = false
      } else {
        this.serviceStatusFlag = true
      }
    },

    /**
     * @description 关闭操作
     * @returns void
     */
    handleCancel() {
      this.visible = false
      this.basicInfo = {}
      this.$emit('close')
    },

    /**
     * @description 确定操作
     * @returns void
     */
    handleOk() {
      if (this.basicInfo.topicName === '') {
        this.$message.warning('模型名称不能为空，请输入')
        return
      }
      if (this.basicInfo.serviceCode === '') {
        this.$message.warning('接口服务编码不能为空，请输入')
        return
      }
      this.loading = true
      const obj = {
        status: this.basicInfo.serviceStatus,
        topicId: this.basicInfo.id,
        serviceCode: this.basicInfo.serviceCode,
        catalogIds: this.basicInfo.topicType != null && this.basicInfo.topicType.length > 0 ? this.basicInfo.topicType.join(',') : null
      }
      const baseObj = {
        id: this.basicInfo.id,
        topicName: this.basicInfo.topicName,
        topicDesc: this.basicInfo.topicDesc,
        topicType: this.basicInfo.topicType != null && this.basicInfo.topicType.length > 0 ? this.basicInfo.topicType.join(',') : null
      }
      putAction(this.url.updateBaseInfo, baseObj).then((res) => {
        if (res.code === 200) {
          postAction(this.url.update, obj).then((res) => {
            if (res.code === 200) {
              this.$message.success('编辑指标建模数据成功！')
              this.visible = false
              this.$emit('close', true)
            } else {
              this.$message.warning(res.message)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.warning(res.message)
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    }

  }
}
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 685px;
  padding: 0 20px 5px 20px;

  .top {
    width: 100%;
    height: 210px;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 10px;
  }
  .center {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 25px;
  }

  .bottom {
    width: 100%;
    height: calc(100% - 280px);
    padding-top: 15px;
    .box {
      width: 100%;
      height: calc(100% - 60px);
      padding: 0 15px;
      margin-top: 5px;
    }
  }
  .top,
  .center,
  .bottom {
    .item {
      width: 100%;
      margin-bottom: 15px;
      overflow: hidden;
      .item-left {
        width: 250px;
        float: left;
        text-align: right;
        line-height: 32px;
        font-size: 14px;
        .requrid {
          color: red;
        }
      }
      .item-value {
        float: left;
        width: 520px;
        .radio-line {
          line-height: 33px;
        }
      }
    }
  }
}
</style>

<style lang="less">
.content {
  width: 100%;
  height: 690px;
}
.modal-add {
  .ant-modal-body {
    padding: 0;
  }
}
</style>
